<template>
    <div class="recommend">
        <div class="recommend-title">
            <h2>相关推荐</h2>
        </div>
        <div class="recommend-container">
            <li
                class="item-li"
                v-for="(item, i) in itemList"
                :key="i"
            >
                <div class="img-box">
                    <img :src="item.shop_info.ali_image" alt="">
                </div>
                <div class="title-box">
                    <h3>{{ item.shop_info.title }}</h3>
                </div>
                <div class="sub-title-box">
                    <p>{{ item.shop_info.sub_title }}</p>
                </div>
                <div class="price-box">
                    <strong>{{ item.price | toFixed2 }}</strong>
                    <span>{{ item.price | toFixed2 }}</span>
                </div>
                <div class="to-item" @click="toItem(item.id)" />
            </li>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            itemList: []
        }
    },
    created () {
        this.$http.getRecommendList()
            .then(resp => {
                // console.log(resp)
                if (resp.status === 200) {
                    return this.$http.getItemsData(resp.data)
                }
            })
            .then(resp => {
                // console.log(resp)
                for (let i = 0; i < 10; i++) {
                    const randomIndex = Math.floor(Math.random() * resp.list.length)
                    this.itemList.push(resp.list.splice(randomIndex, 1)[0])
                }
                // console.log(this.itemList)
            })
    },
    methods: {
        toItem (id) {
            this.$router.push(`/item?id=${id}`)
            // const url = `/item?id=${id}`
            location.reload()
        }
    }
}
</script>

<style lang="scss">
.recommend {
    width: 100%;
    margin-bottom: 6px;
    border-bottom: 1px solid #d1d1d1;
    border-top: 1px solid #d1d1d1;
    background-color: #fff;
    .recommend-title {
        padding: 10px 18px;
        border-bottom: 1px solid #e6e6e6;
        h2 {
            font-size: 16px;
            color: #535353;
            font-weight: bold;
        }
    }
    .recommend-container {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        padding: 18px 13px 0;
        justify-content: space-between;
        .item-li {
            width: 48%;
            margin-bottom: 25px;
            position: relative;
            .img-box {
                width: 100%;
                border: 1px solid #f0f0f0;
                border-radius: 5px;
                box-sizing: border-box;
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .title-box {
                width: 100%;
                padding: 0 10px;
                overflow: hidden;
                box-sizing: border-box;
                h3 {
                    width: 100%;
                    font-size: 13px;
                    color: #262626;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .sub-title-box {
                width: 100%;
                padding: 0 10px;
                overflow: hidden;
                box-sizing: border-box;
                p {
                    width: 100%;
                    font-size: 10px;
                    color: #727272;
                    font-weight: bold;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-top: 10px;
                }
            }
            .price-box {
                font-size: 10px;
                font-weight: bold;
                padding: 8px 10px 0;
                box-sizing: border-box;
                strong {
                    font-size: 12px;
                    color: #c73734;
                }
                span {
                    color: #999;
                    text-decoration: line-through;
                    margin-left: 5px;
                }
            }
            .to-item {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
            }
        }
    }
}
</style>
